<template>
	<view class="page">
		<headerVue title="提币"></headerVue>
		<view class="inpVue padding30">
			<view class="label">{{i18n.p3}}</view>
			<view class="flex-between margin30">
				<view class="item flex align-center padding-row30" :class="{active: selectId===1}" @click="change(1)">
					<image src="../../static/coins/usdt.png" style="width: 72rpx; height: 72rpx;"></image>
					<text style="line-height: 1; font-size: 32rpx; padding-left: 15rpx;">USDT</text>
				</view>
				<view class="item flex align-center padding-row30" :class="{active: selectId===2}" @click="change(2)">
					<image src="../../static/coins/cat.png" style="width: 72rpx; height: 72rpx;"></image>
					<text style="line-height: 1; font-size: 32rpx; padding-left: 15rpx;">AICAT</text>
				</view>
			</view>
			<view class="using">{{i18n.p7}}：{{ using }}</view>
		</view>

		<view class="inpBox margin40 flex align-center">
			<input type="number" v-model="quantity" :placeholder="i18n.p8"
				placeholder-style="font-size: 32rpx;color: rgba(255,255,255,0.3);" />
			<view class="max" @click="quantity=using">MAX</view>
		</view>

		<view class="tip text-center">{{i18n.p9}}</view>

		<view class="btn margin60" @click="withdrawFun()">
			<image src="../../static/wallet/btn.png" style="width: 100%; height: 100%;"></image>
		</view>

		<view class="notice text-center">
			{{i18n.p10}}
		</view>

		<view class="thVue flex-between margin40 padding-row30">
			<view class="li">时间</view>
			<view class="li text-right">数量</view>
		</view>
		<view class="tdVue flex-between padding-row30 margin0" v-for="(item, index) in list" :key="index">
			<view class="li">{{item.createTime}}</view>
			<view class="li text-right">{{item.amount}}</view>
		</view>
	</view>
</template>

<script>
	import wallet from "common/wallet";
	export default {
		data() {
			return {
				quantity: "",
				selectId: 1,
				using: 0,
				pageNum: 1,
				pageSize: 20,
				isLastPage: false,
				list: []
			}
		},
		async onShow() {
			await this.getList()
			await this.getRecord()
		},
		computed:{
			i18n() {
				return this.$t("message");
			}
		},
		async onReachBottom() {
			if(this.isLastPage) return
			this.pageNum++
			await this.getRecord()
		},
		methods: {
			async getRecord(){
				const res = await this.$request("/front/user/extractRecord", {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				})
				if(res.code===0) {
					console.log(res)
					this.list = this.list.concat(res.data.list)
					this.isLastPage = res.data.isLastPage
				}
			},
			async getList() {
				const res = await this.$request("/front/user/userWallet")
				if (res.code === 0) {
					if (this.selectId === 1) {
						res.data.forEach(item => {
							if (item.currencyStr == "USDT") this.using = item.balance
						})
					} else {
						res.data.forEach(item => {
							if (item.currencyStr == "AICAT") this.using = item.balance
						})
					}
				}
			},

			change(id) {
				if (this.selectId == id) return
				this.quantity = ''
				this.getList()
				this.selectId = id
			},

			async withdrawFun() {
				if (this.quantity == 0 || !this.quantity) return this.$u.toast(this.i18n.p8)
				uni.showLoading()
				const res = await this.$request("/front/user/extract", {
					currency: this.selectId,
					amount: this.quantity
				})
				if (res.code === 0) {
					await wallet.extract(res.data.signature, res.data.callData).then(() => {
						uni.hideLoading()
						this.$u.toast(this.i18n.success)
						this.quantity = ""
						this.getList()
					}).catch(err => {
						this.$u.toast(err.message)
					})
				} else {
					uni.hideLoading()
					this.$u.toast(res.msg)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.inpVue {
		width: 100%;

		.label {
			line-height: 1;
		}

		.item {
			width: 320rpx;
			height: 158rpx;
			background: url("../../static/wallet/kuang_0.png") no-repeat;
			background-size: 100% 100%;
		}

		.active {
			background: url("../../static/wallet/kuang.png") no-repeat;
			background-size: 100% 100%;
		}

		.using {
			line-height: 1;
			padding-top: 20rpx;
		}
	}

	.inpBox {
		width: 670rpx;
		height: 168rpx;
		background: url("../../static/wallet/kuang1.png") no-repeat;
		background-size: 100% 100%;
		padding: 0 40rpx;

		input {
			flex: 1;
			color: #fff;
			font-size: 32rpx;
		}

		.max {
			font-weight: 600;
			font-size: 32rpx;
			color: #45F882;
			text-decoration: underline;
		}
	}

	.tip {
		font-size: 26rpx;
		color: rgba(69, 248, 130, 0.8);
		line-height: 1;
		padding-top: 30rpx;
	}

	.btn {
		width: 327rpx;
		height: 90rpx;
	}

	.notice {
		font-size: 26rpx;
		color: #FB5151;
		line-height: 36rpx;
		padding-top: 30rpx;
	}

	.thVue {
		width: 670rpx;
		height: 78rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 8rpx;

		.li {
			//width: 33.33333%;
			height: 78rpx;
			line-height: 78rpx;
			color: rgba(255, 255, 255, 0.6);
		}
	}

	.tdVue {
		width: 670rpx;
		height: 78rpx;

		.li {
			//width: 33.33333%;
			height: 78rpx;
			line-height: 78rpx;
			color: rgba(255, 255, 255, 0.6);
		}
	}

	.tdVue:nth-child(2n) {
		background: rgba(255, 255, 255, 0.03);
		;
	}
</style>